<script setup>

import {Iphone, Location, OfficeBuilding, Tickets, User} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from "@/utils/amusement"
import Bottom from "@/components/Bottom.vue";
const dialogAddState = ref(false)
let storedData = sessionStorage.getItem('loginUser');
let loginUser = JSON.parse(storedData);

// 取出 loginUser 对象中的 sname 属性
let adsno = loginUser.adsno;
let adpass = loginUser.adpass;
let identify = loginUser.identify;
let sid = loginUser.sid;
let sname = loginUser.sname;
let gender = loginUser.gender;
let phone = loginUser.phone;
let dept = loginUser.dept;
let address = loginUser.address;
let mail = loginUser.mail;
let talent = loginUser.talent;

const formAddData = {
  sid : sid ,
  sname : sname ,
  gender : gender ,
  phone: phone,
  address: address,
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})

const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}

// onMounted(() => {
//   // formAdd.sid = JSON.parse(localStorage.getItem("userData")).account
//   getInfoBySid()
// })
//
// const getInfoBySid = () => request({
//   url: '/sys/funstudent/gets' + '?sid=' + sessionStorage.getItem('sid').toString(),
//   method: 'get',
// }).then(res => {
//   console.log(res);
//   formAdd.sname = res.sname
//   formAdd.sid = res.sid
//   formAdd.gender = res.gender
//   formAdd.phone = res.phone
//   formAdd.address = res.address
//
// })


const dialogAddOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/sys/funstudent/update',
    data: JSON.stringify(formAdd),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      sid =formAdd.sid;
      sname = formAdd.sname;
      gender = formAdd.gender;
      phone = formAdd.phone;
      address = formAdd.address;
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogAddState.value = false
}

</script>

<template>
  <div class="main">
    <h2>个人信息</h2>
    <el-descriptions class="margin-top" title="资料卡片:" :column="2" size="default" border>
      <template #extra>
        <el-button @click="dialogAddState=true" type="primary">修改个人信息</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            学号
          </div>
        </template>
<!--        {{ sid.replace(/"/g, '') }}-->
        {{formAdd.sid}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            姓名
          </div>
        </template>
<!--        {{ sname.replace(/"/g, '') }}-->
        {{ formAdd.sname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            性别
          </div>
        </template>
        {{ formAdd.gender}}
<!--        {{ gender.replace(/"/g, '') }}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            手机
          </div>
        </template>
        {{ formAdd.phone.replace(/"/g, '') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            地址
          </div>
        </template>
        {{ formAdd.address.replace(/"/g, '') }}
      </el-descriptions-item>

    </el-descriptions>
      <a :href="$router.resolve({ path: '/home' }).href">返回</a>
    <hr>
  </div>
  <div class="bottom">
    <bottom></bottom>
  </div>

  <!-- 新增模态框 -->
  <el-dialog v-model="dialogAddState" title="个人简介" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAdd" label-width="120px">
        <el-form-item prop="price" label="学号">
          <el-input v-model="formAdd.sid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formAdd.sname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sgender" label="性别">
          <el-input v-model="formAdd.gender":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机">
          <el-input v-model="formAdd.phone" ></el-input>
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input v-model="formAdd.address" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
  height: 300px;
}

.main {

  width: 1200px;
  margin: 0 auto;
  height: 500px;

}
</style>